{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "dc852a60",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<link href=\"https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css\" rel=\"stylesheet\">\n",
       "\n",
       "\n",
       "<div id=\"example-table\"></div>\n",
       "<script>\n",
       "require(['https://unpkg.com/tabulator-tables/dist/js/tabulator.min'], (Tabulator)=>{\n",
       "    var tabledata = [\n",
       "    {id:1, name:\"Oli Bob\", progress:12, gender:\"male\", rating:1, col:\"red\", dob:\"19/02/1984\", car:1},\n",
       "    {id:2, name:\"Mary May\", progress:1, gender:\"female\", rating:2, col:\"blue\", dob:\"14/05/1982\", car:true},\n",
       "    {id:3, name:\"Christine Lobowski\", progress:42, gender:\"female\", rating:0, col:\"green\", dob:\"22/05/1982\", car:\"true\"},\n",
       "    {id:4, name:\"Brendon Philips\", progress:100, gender:\"male\", rating:1, col:\"orange\", dob:\"01/08/1980\"},\n",
       "    {id:5, name:\"Margret Marmajuke\", progress:16, gender:\"female\", rating:5, col:\"yellow\", dob:\"31/01/1999\"},\n",
       "    {id:6, name:\"Frank Harbours\", progress:38, gender:\"male\", rating:4, col:\"red\", dob:\"12/05/1966\", car:1},\n",
       "    ];\n",
       "\n",
       "window.table = new Tabulator(\"#example-table\", {\n",
       "    data:tabledata,           //load row data from array\n",
       "    layout:\"fitColumns\",      //fit columns to width of table\n",
       "    responsiveLayout:\"hide\",  //hide columns that dont fit on the table\n",
       "    addRowPos:\"top\",          //when adding a new row, add it to the top of the table\n",
       "    history:true,             //allow undo and redo actions on the table\n",
       "    pagination:\"local\",       //paginate the data\n",
       "    paginationSize:7,         //allow 7 rows per page of data\n",
       "    paginationCounter:\"rows\", //display count of paginated rows in footer\n",
       "    movableColumns:true,      //allow column order to be changed\n",
       "    initialSort:[             //set the initial sort order of the data\n",
       "        {column:\"name\", dir:\"asc\"},\n",
       "    ],\n",
       "    columnDefaults:{\n",
       "        tooltip:true,         //show tool tips on cells\n",
       "    },\n",
       "    columns:[                 //define the table columns\n",
       "        {title:\"Name\", field:\"name\", editor:\"input\", headerFilter:true},\n",
       "        {title:\"Task Progress\", field:\"progress\", hozAlign:\"left\", formatter:\"progress\", editor:true},\n",
       "        {title:\"Gender\", field:\"gender\", width:95, editor:\"select\", editorParams:{values:[\"male\", \"female\"]}},\n",
       "        {title:\"Rating\", field:\"rating\", formatter:\"star\", hozAlign:\"center\", width:100, editor:true},\n",
       "        {title:\"Color\", field:\"col\", width:130, editor:\"input\"},\n",
       "        {title:\"Date Of Birth\", field:\"dob\", width:130, sorter:\"date\", hozAlign:\"center\"},\n",
       "        {title:\"Driver\", field:\"car\", width:90,  hozAlign:\"center\", formatter:\"tickCross\", sorter:\"boolean\", editor:true},\n",
       "             {title:\"Example\", field:\"example\", formatter:\"link\", formatterParams:{\n",
       "    labelField:\"name\",\n",
       "    urlPrefix:\"mailto://\",\n",
       "    target:\"_blank\",\n",
       "}}\n",
       "    ],\n",
       "});\n",
       "})\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<link href=\"https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css\" rel=\"stylesheet\">\n",
    "\n",
    "\n",
    "<div id=\"example-table\"></div>\n",
    "<script>\n",
    "require(['https://unpkg.com/tabulator-tables/dist/js/tabulator.min'], (Tabulator)=>{\n",
    "    var tabledata = [\n",
    "    {id:1, name:\"Oli Bob\", progress:12, gender:\"male\", rating:1, col:\"red\", dob:\"19/02/1984\", car:1},\n",
    "    {id:2, name:\"Mary May\", progress:1, gender:\"female\", rating:2, col:\"blue\", dob:\"14/05/1982\", car:true},\n",
    "    {id:3, name:\"Christine Lobowski\", progress:42, gender:\"female\", rating:0, col:\"green\", dob:\"22/05/1982\", car:\"true\"},\n",
    "    {id:4, name:\"Brendon Philips\", progress:100, gender:\"male\", rating:1, col:\"orange\", dob:\"01/08/1980\"},\n",
    "    {id:5, name:\"Margret Marmajuke\", progress:16, gender:\"female\", rating:5, col:\"yellow\", dob:\"31/01/1999\"},\n",
    "    {id:6, name:\"Frank Harbours\", progress:38, gender:\"male\", rating:4, col:\"red\", dob:\"12/05/1966\", car:1},\n",
    "    ];\n",
    "\n",
    "window.table = new Tabulator(\"#example-table\", {\n",
    "    data:tabledata,           //load row data from array\n",
    "    layout:\"fitColumns\",      //fit columns to width of table\n",
    "    responsiveLayout:\"hide\",  //hide columns that dont fit on the table\n",
    "    addRowPos:\"top\",          //when adding a new row, add it to the top of the table\n",
    "    history:true,             //allow undo and redo actions on the table\n",
    "    pagination:\"local\",       //paginate the data\n",
    "    paginationSize:7,         //allow 7 rows per page of data\n",
    "    paginationCounter:\"rows\", //display count of paginated rows in footer\n",
    "    movableColumns:true,      //allow column order to be changed\n",
    "    initialSort:[             //set the initial sort order of the data\n",
    "        {column:\"name\", dir:\"asc\"},\n",
    "    ],\n",
    "    columnDefaults:{\n",
    "        tooltip:true,         //show tool tips on cells\n",
    "    },\n",
    "    columns:[                 //define the table columns\n",
    "        {title:\"Name\", field:\"name\", editor:\"input\", headerFilter:true},\n",
    "        {title:\"Task Progress\", field:\"progress\", hozAlign:\"left\", formatter:\"progress\", editor:true},\n",
    "        {title:\"Gender\", field:\"gender\", width:95, editor:\"select\", editorParams:{values:[\"male\", \"female\"]}},\n",
    "        {title:\"Rating\", field:\"rating\", formatter:\"star\", hozAlign:\"center\", width:100, editor:true},\n",
    "        {title:\"Color\", field:\"col\", width:130, editor:\"input\"},\n",
    "        {title:\"Date Of Birth\", field:\"dob\", width:130, sorter:\"date\", hozAlign:\"center\"},\n",
    "        {title:\"Driver\", field:\"car\", width:90,  hozAlign:\"center\", formatter:\"tickCross\", sorter:\"boolean\", editor:true},\n",
    "             {title:\"Example\", field:\"example\", formatter:\"link\", formatterParams:{\n",
    "    labelField:\"name\",\n",
    "    urlPrefix:\"mailto://\",\n",
    "    target:\"_blank\",\n",
    "}}\n",
    "    ],\n",
    "});\n",
    "})\n",
    "</script>\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "55d374f8",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
